<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app';
import { getBiaojideApi, tijiaoYufaApi } from '/api/request.js';
import haoSlider from '/components/hao-slider/hao-slider.vue';
const props = defineProps({});
onMounted(() => {});
const platform = ref({});
const goback = async () => {
    uni.navigateBack();
};
const query = ref({
    id: 0
});
const list = ref(null);
onLoad((e) => {
    query.value.id = e.id;
});
const getList = async () => {
    try {
        let res = await getBiaojideApi({
            grammar_ids: query.value.word_ids
        });
        console.log(res);
        list.value = res.data;
    } catch (error) {
        console.log(error);
        //TODO handle the exception
    }
};
onShow(() => {
    platform.value = uni.getStorageSync('platform');
    uni.showLoading();
    getList().finally(() => {
        uni.hideLoading();
    });
});
const status = ref(2);
const timer = ref(null);
const demoVideo = ref(null);
demoVideo.value = uni.createVideoContext('demoVideo');

/**
 * statis 1播放
 * status 2是透明
 * status 3是暂停
 */
// dianji函数根据stauts的值进行不同的操作
const dianji = () => {
    if (status.value == 2) {
        status.value = 3;
        timer.value = setTimeout(() => {
            status.value = 2;
            clearTimeout(timer.value);
            timer.value = null;
        }, 1500);
    }
};
const playTuo = () => {
    try {
        if (timer.value) {
            clearTimeout(timer.value);
            timer.value = null;
        }
        status.value = 1;
        demoVideo.value.pause();
    } catch (e) {
        console.log(e);
    }
};
const plays = () => {
    if (timer.value) {
        clearTimeout(timer.value);
        timer.value = null;
    }
    demoVideo.value.play();
    status.value = 3;
    timer.value = setTimeout(() => {
        status.value = 2;
        clearTimeout(timer.value);
        timer.value = null;
    }, 1500);
};
const gengxin = (e) => {
    if (!allTime.value || allTime != e.detail.duration) {
        allTime.value = e.detail.duration;
    }
    playSlider.value = Math.ceil(e.detail?.currentTime);
    time.value = formatTime(e.detail?.currentTime);
};
const formatTime = (timeInSeconds) => {
    const hours = Math.floor(timeInSeconds / 3600); // 获取小时
    const minutes = Math.floor((timeInSeconds % 3600) / 60); // 获取分钟
    const seconds = Math.floor(timeInSeconds % 60); // 获取秒数
    const pad = (num) => String(num).padStart(2, '0');
    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
};
const closePage = () => {
    uni.hideLoading();
    demoVideo.value.pause();
    demoVideo.value = null;
};
onHide(() => {
    closePage();
});
onUnload(() => {
    closePage();
});
const playSlider = ref(0);
const time = ref('');
const allTime = ref(0);
const changeAudio = (e) => {
    demoVideo.value.seek(e);
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform?.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform?.dingbu + 'rpx',
                height: platform?.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> video </view>
            <image
                class="left"
                src="/static/img/goback-black.png"
                mode="widthFix"
                style="opacity: 0"
            />
        </view>
        <view class="body">
            <view class="wais uni-row">
                <video
                    @timeupdate="gengxin"
                    :enable-play-gesture="false"
                    class="video"
                    :autoplay="true"
                    id="demoVideo"
                    :show-center-play-btn="false"
                    :controls="false"
                    object-fit="fill"
                    src="https://alipub.binfenyingyu.com/audio/video/iː.mp4"
                >
                    <cover-view class="tupian-wai" @click="dianji">
                        <cover-image
                            @click="plays"
                            :style="{ top: status == 1 ? '50%' : '-20%' }"
                            class="controls-play img"
                            src="/static/img/play.png"
                        ></cover-image>
                        <cover-image
                            @click="playTuo"
                            :style="{ top: status == 3 ? '50%' : '-20%' }"
                            class="controls-pause img"
                            src="/static/img/zanting.png"
                        ></cover-image>
                    </cover-view>
                </video>
            </view>
            <cover-view class="yuanjiao s"></cover-view>
            <cover-view class="yuanjiao ss"></cover-view>
            <cover-view class="yuanjiao sss"></cover-view>
            <cover-view class="yuanjiao ssss"></cover-view>
            <view class="slider">
                <haoSlider
                    sliderBlockShadow="0rpx 2rpx 4rpx 0rpx rgba(175,120,240,0.59)"
                    :isTip="false"
                    :max="allTime"
                    :value="Number(playSlider)"
                    :min="0"
                    :sliderHeight="12"
                    :sliderBlockSize="28"
                    :sliderRightColor="'#EAD0FF'"
                    :sliderLeftColor="'#EAD0FF'"
                    :sliderBgColor="'#9561F3'"
                    @change="changeAudio"
                />
            </view>
            <view class="time">
                {{ time }}
            </view>
        </view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            margin-left: 32rpx;
        }
    }

    .yuanjiao {
        position: fixed;
        z-index: 999;
        left: 20rpx;
        top: 280rpx;
        background-image: radial-gradient(circle at left bottom, transparent 18rpx, #f7f8fa 0);
        width: 18rpx;
        height: 18rpx;
    }

    .body {
        padding: 160rpx 28rpx;

        .wais {
            position: relative;
            // padding: 20rpx 0rpx;
            // border-radius: 30rpx;
            overflow: hidden;
            justify-content: center;
            // background-color: #000;

            .video {
                width: 100%;
                height: 418rpx;
            }

            .tupian-wai {
                width: 100%;
                height: 100%;
            }

            .controls-play,
            .controls-pause {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                &.img {
                    width: 80rpx;
                    height: 80rpx;
                }
            }
        }

        .slider {
            margin-top: 100rpx;
        }

        .time {
            margin-top: 8rpx;
            font-size: 20rpx;
            color: #9561f3;
            text-align: right;
        }
    }
}
</style>
